<template>
    <!-- 项目的全居页面 -->
    <div class="common-layout">
        <el-container>
      <!-- 页面的顶部 -->
      <el-header>
        <top :collapse="collapse"  @change-collapse="handlerCollapse"></top>
      </el-header>
      <el-container>
        <!-- 页面的左侧菜单 -->
        <el-aside :style="{ width: collapse ? 'auto' : '200px' }">
          <left-menu :collapse="collapse"></left-menu>
        </el-aside>
        <!-- 页面的右侧区域 -->
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
    </div>
</template>

<script>
// 引入顶部样式组件
import top from '@/components/Top.vue';
//引入左侧菜单的组件
import LeftMenu from '@/components/LeftMenu.vue';
//引入二级页面
import { RouterView } from 'vue-router';
export default {
    components: { top,LeftMenu,RouterView },
    data() { 
    return {
      collapse: false
    }
  },
  methods: {
    handlerCollapse() {
      this.collapse = !this.collapse;
      console.log(this.collapse);
      
    }
  }
}


</script>

<style scoped>
.common-layout,
.el-container {
    width: 100%;
    height: 100%;
}

.el-header {
    background-color: gold;
}

.el-aside {
    background-color: #545c64;
}

.el-main {
    background-color: #e9eef3;
}
</style>